<template>
	<div class="withdrawals">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>添加银行卡</span>
			<span class="img"></span>
		</div>	
		<p class="title">温馨提示：为了确保资金安全，只能添加{{name}}的银行卡</p>
		<div class="inner" style="border: none;">
			<span>开户名</span>
			<span style="flex: 1;">{{name}}</span>
		</div>
		<div class="inner" @click="show">
			<span>开户银行</span>
			<div id="trigger" style="flex: 1;">{{bankName}}</div>
			<img src="../../assets/arrow_right.png" />
		</div>
		<div class="inner" >
			<span>开户支行</span>
			<input type="text" name="" v-model="branch" id="" value="" placeholder="请输入开户支行" />
		</div>
		<div class="inner" style="margin-top: 0.2667rem;" >
			<span>银行卡号</span>
			<input type="text" name="" v-model="bankNumber" id="" value="" placeholder="请输入银行卡号" />
		</div>
		<div class="inner" >
			<span>确认卡号</span>
			<input type="text" name="" v-model="bankNumber2" id="" value="" placeholder="确认银行卡号" />
		</div>
		
		<v-button buttonText='确认添加' :isActive='isActive' topNum='0.8rem' @toNext='login'></v-button>
		
		
		<!--银行卡模态框-->
		<!--<mt-popup v-model="flag" position="bottom" modal="true">
		    <p class="model-p" v-for="item in bankList">
		    	<span @click="show(item.externalCode,item.name)" :title="item.externalCode">{{item.name}}</span>
		    </p>
		</mt-popup>-->
		
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast,isRealName,isBankNumber } from '@/util/index'
	import '../../util/mobileSelect.js';
	import Button from '@/components/Button'
	//import Select from '@/components/mobileSelect'
	import { Popup } from 'mint-ui';
	export default{
		data(){
			return{
				selectedbank:'',
				name:"*",
				imgSrc:require("../../assets/verified_pic_add.png"),
				arrowSrc:"",
				list:[],
				bankList:[],
				branch:"",
				bankNumber:"",
				bankNumber2:"",
				sysBankList:[],
				flag:true,
				bankName:"请输入开户行",
				bankCode:"",
				bankCodelist:[]
				
			}
		},
		computed: {
			isActive: function () {
				if (isRealName(this.branch)&&isBankNumber(this.bankNumber)&&this.bankNumber==this.bankNumber2) {
					return true
				} else {
					return false
				}
			}
		},
		mounted(){
			
	    },
	    components: {
			'v-button': Button,
			"mt-popup":Popup
		},
		methods:{
			back(){
			    this.$router.back(-1);
			},
			show(code,name) {
				this.selectedbank=code;
				if(name){
					this.bankName=name;
				}
				
				this.flag=!this.flag;
			},
		    change() {
	            this.arrowSrc = this.arrowSrc == require('../../assets/arrow_fold.png') ? require('../../assets/arrow_unfold.png') : require('../../assets/arrow_fold.png')
	       },
		   each(val){
		   		this.sysBankList=val;
				for (var i = 0; i < val.length; i++){
				   this.bankCodelist.push(val[i])
				   this.bankList.push(val[i].name)
				}
				this.initBank();
				//this.$store.dispatch('saveBankList',this.bankList);
			},
			
			initBank(){
//				/console.log(this.bankList);
				var that = this;
				 var mobileSelect = new MobileSelect({
			          trigger: "#trigger",
			          title: "选择开户行",
			          wheels: [
			            {data: this.bankList}
			          ],
			          callback: function (indexArr, data) {
			            console.log(data);
			            that.bankName = data[0];
			            that.bankCode = that.bankCodelist[indexArr].insideCode;
			          }
			        });

			},
			login(){
				var obj = document.getElementById("trigger"); 
				var tex = obj.innerHTML; 
				
	   			let senddata = {
					bankCode:this.bankCode,
					branch:this.branch,
					bankName:tex,
					bankNo:this.bankNumber,
					userId:window.localStorage.getItem("token"),
					plat:"mlj"
				}
				if(this.isActive) {
					my.doAddBankCard(senddata).then((res) => {
						if (res.data.code == 200) {
							 this.$router.back(-1);
						} else if(res.data.code == 103){
							this.$router.push({path:'/realnameInfo'})
						}else if(res.data.code==222){
				            this.$router.push({path:'/login'})
				        } else {
							toast(res.data.message)
						}
					})
				}
			}
			
		},
		
		mounted(){
			
			let senddata = {
				userId:window.localStorage.getItem("token"),
				plat:"mlj"
			}
		
			my.getAddBankCardInitData(senddata).then((res) => {
				if (res.data.code == 200) {
					this.name=res.data.data.userAuth.realname;
					this.each(res.data.data.sysBankList);
				 	
				 
				} else if(res.data.code == 103){
					this.$router.push({path:'/realnameInfo'})
				} else {
					toast(res.data.message)
				}
			})
		},
		beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		    next();
		}
		
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
@import '../../less/mobileSelect.css';
.withdrawals{
	color:white;
	.title{
		padding:0 @p30;
		color: #FF335B;
		height: 1.06666rem;
		line-height: 1.06666rem;
		font-size: @f24;
	}
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		background: #000000;
		img,.img{
			width: @p30;
			height: @p30;
		}
	}
	.photo{
		background: #141723;
		padding:@p30;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		span{
			font-size:@f32;	
			margin-right: 1.06493rem;
			width: 2rem;
		}
		p{
			padding: 0;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			span{
				margin-top: @f26;
				width: auto;
				margin: 0;
			}
			img{
				width: 1.6rem;
				height: 1.6rem;	
			}
		}
	}
	
	.inner{
		background: #141723;
		padding:0 @p30;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.17333rem;
		border-top:#262934 solid 1px ;
		#trigger{
			font-size: 0.42667rem;
		}
		input{
			flex: 1;
			color: white;
			font-size: @f32;
			height: 1.17333rem;
		}
		select{
			flex: 1;
			color: #40495f;
			font-size: @f32;
			height: 1.17333rem;
			background:url(../../assets/arrow_fold.png)no-repeat right center;
			border: none;
			-webkit-appearance: none;
			option{
				color: #40495f;
				font-size: @f32;
				height: .8rem;
				
			}
		}
		span{
			font-size:@f32;	
			margin-right: 1.06493rem;
			width: 2rem;
		}
		p{
			font-size: @f32;
			padding:0px;
			color:white;
			span{
				margin-right: .3rem;
				font-weight: bold;
			}
		}
		img{
			width: @f28;
			height: @f28;
		}
	}
	p{
		padding:0 @p30;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 1.36rem;
		color: @Color;
		font-size: @f32;
	}
	.login{
		
		width: 9.2rem;
		height: 1.17333rem;
		line-height: 1.17333rem;
		text-align: center;
		color: @Color;
		border: 2px @Color solid;
		margin: 1.0666rem auto 0;
		font-size: 0.48rem;
		border-radius: 0.08rem;
		
	}
	.model-p{
		display: block;
		height: auto;
		text-align: center;
		line-height:normal;
	}
	
}

</style>